<template>
    <div class="ibook">
        <title-bar :titleAndMenuShow="titleAndMenuShow"></title-bar>
        <div class="read-wapper">
            <div id="read"></div>
            <div class="mask">
                <div class="left" @click="prevPage"></div>
                <div class="center" @click="toggleTitleAndMenuShow"></div>
                <div class="right" @click="nextPage"></div>
            </div>
        </div>
        <menu-bar :titleAndMenuShow="titleAndMenuShow"
                  :fontSizeList="fontSizeList"
                  :defaultFontSize="defaultFontSize"
                  @setFontSize="setFontSize"
                  :themeList="themeList"
                  :defaultTheme="defaultTheme"
                  @setTheme="setTheme"
                  :bookAvailable="bookAvailable"
                  @onProgressChange="onProgressChange"
                  :navigation="navigation"
                  @jumpTo="jumpTo"
                  ref="menuBar"></menu-bar>
    </div>
</template>

<script>
import TitleBar from '@/components/TitleBar'
import MenuBar from '@/components/MenuBar'
import Epub from 'epubjs'
const DOWNLOAD_URL = '/static/AngularJS.epub'
global.ePub = Epub
export default {
   components:{
        TitleBar,
        MenuBar
  },
  data() {
    return {
       titleAndMenuShow: false,
       fontSizeList: [
           { fontSize: 12 },
           { fontSize: 14 },
           { fontSize: 16 },
           { fontSize: 18 },
           { fontSize: 20 },
           { fontSize: 22 },
           { fontSize: 24 }
       ],
       defaultFontSize: 16,
       themeList: [
           {
               name: 'default',
               style: {
                   body: {
                       'color': '#000',
                       'background': '#fff'
                   }
               }
           },
           {
               name: 'eye',
               style: {
                   body: {
                       'color': '#000',
                       'background': '#ceeaba'
                   }
               }
           },
           {
               name: 'night',
               style: {
                   body: {
                       'color': '#fff',
                       'background': '#000'
                   }
               }
           },
           {
               name: 'gold',
               style: {
                   body: {
                       'color': '#000',
                       'background': 'rgb(241, 236, 226)'
                   }
               }
           }
       ],
       defaultTheme: 0,
       // 图书是否处于可用状态
       bookAvailable: false,
       navigation:{}
    }
  },
  methods: {
    ShowEpub() {
        // 生成book
      this.book = new Epub(DOWNLOAD_URL)
        // 生成rendition
      this.rendition = this.book.renderTo('read', {
        width: window.innerWidth,
        height: window.innerHeight
      })
        // 通过rendition渲染book
      this.rendition.display()
        // 获取theme对象
      this.theme = this.rendition.themes
      // 设置默认字体大小
      this.setFontSize(this.defaultFontSize)
      // 注册theme
      this.registerTheme()
      // 设置theme
      this.setTheme(this.defaultTheme)
      // 获取locations对象,通过epub的钩子函数获取locations
      this.book.ready.then(() => {
          this.navigation = this.book.navigation
          return this.book.locations.generate()
      }).then(result => {
          this.locations = this.book.locations
          this.bookAvailable = true
      })
    },
    prevPage() {
        if (this.rendition) {
            this.rendition.prev()
        }
    },
    nextPage() {
        if (this.rendition) {
            this.rendition.next()
            console.log(this.locations)
        }
    },
    toggleTitleAndMenuShow() {
        this.titleAndMenuShow = !this.titleAndMenuShow
        if (!this.titleAndMenuShow) {
            this.$refs.menuBar.hideSetting()
        }
    },
    setFontSize(fontsize) {
        this.defaultFontSize = fontsize
        if (this.theme) {
            this.theme.fontSize(fontsize + 'px')
        }
    },
    registerTheme() {
        this.themeList.forEach(theme => {
            this.theme.register(theme.name, theme.style)
        })
    },
    setTheme(index) {
        this.theme.select(this.themeList[index].name)
        this.defaultTheme = index
    },
    onProgressChange(progress) {
        const percentage = progress / 100
        const location = percentage > 0 ? this.locations.cfiFromPercentage(percentage) : 0
        this.rendition.display(location)
    },
    hideTitleAndMenu() {
        this.titleAndMenuShow = false
        this.$refs.menuBar.hideSetting()
        this.$refs.menuBar.hideContent()
    },
    // 根据链接跳转
    jumpTo(href) {
        this.rendition.display(href)
        this.hideTitleAndMenu()
    }
  },
  mounted() {
    this.ShowEpub()
  }
}
</script>

<style lang="scss" scoped>
@import "assets/styles/global";
.ibook{
    position: relative;
    .read-wapper{
        .mask{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 100;
            display: flex;
            .left{
                flex: 0 0 px2rem(100);
            }
            .center{
                flex: 1;
            }
            .right{
                flex: 0 0 px2rem(100);
            }
        }
    }

}
</style>
